<template>
  <div>
    <el-card style=width:50%>
      <span slot="header">
        我关注的教师
      </span>
       <transition-group name="fade" tag="p">
    <el-button v-for="(i,idx) in favs" :key="i">
    {{i}}&nbsp;<i class="el-icon-close" @click="favsClick(idx)"></i>
    </el-button>
       </transition-group>
    </el-card>
<el-card style="width:50%;margin-top:20px">
      <span slot="header">
        未关注的教师
      </span>
      <transition-group name="fade" tag="p">
  <el-button v-for="(i,idx) in unfavs" :key="i" @click="unfavsClick(idx)">
    {{i}}
  </el-button>
      </transition-group>
</el-card>
  </div>
</template>
<script>
  export default {
    data () {
      return{
        favs:['123','456','789'],
        unfavs:['aaa','bbb','ccc']
      }
    },
    methods:{
      favsClick (idx){
        let zz = this.favs.splice(idx,1);
        this.unfavs.unshift(zz[0]);
      },
      unfavsClick (idx){
        let zz = this.unfavs.splice(idx,1)
        this.favs.unshift(zz[0]);
      }
    }
  }

</script>
<style>
  .fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>